<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
<!--    <link rel="apple-touch-icon" sizes="76x76" href="/static/Anchor/assets/img/favicon.ico">-->
<!--    <link rel="icon" type="image/png" href="/static/Anchor/assets/img/favicon.ico">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>做题系统B类练习</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <!-- Google Font -->
<!--    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700" rel="stylesheet">-->

    <!--&lt;!&ndash; Font Awesome Icons &ndash;&gt;-->
    <!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">-->

    <!-- Main CSS -->
    <link href="/static/Anchor/assets/css/main.css" rel="stylesheet"/>

    <!-- Animation CSS -->
    <link href="/static/Anchor/assets/css/vendor/aos.css" rel="stylesheet"/>

    <!-- Docs CSS -->
    <link href="/static/Anchor/assets/css/vendor/bootstrap-toc.css" rel="stylesheet"/>
    <link href="/static/Anchor/assets/css/vendor/prism.css" rel="stylesheet"/>
    <style>
        .lead{
            font-size: 1.4rem;
        }

        .SingleSelectUp:hover{
            background-color: #ebebeb;
        }

        .go-top {
            position: fixed;	        /* 设置fixed固定定位 */
            bottom: 20px;		/* 距离浏览器窗口下边框20px */
            right: 20px;		/* 距离浏览器窗口右边框20px */

            text-decoration: none;		/* 取消超链接下画线 */
            color: #333;			/* 设置文本颜色 */
            background-color: #f2f2f2;		/* 设置背景颜色 */
            border: 1px solid #ccc;		/* 设置边框样式 */
            padding: 10px 20px;			/* 设置内边距 */
            border-radius: 5px;			/* 设置圆角矩形 */
            letter-spacing: 2px;		/* 设置文字间距 */
        }
        .img-title{
            max-width: 80%;
            max-height: 80%;
            display: block;
            margin: 0 auto;
        }

        .page-link{
            width: 3.1em;
            height: 3em;
            /*display:block;*/
            /*text-align:center;*/
        }
    </style>


</head>

<body>


<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------>

<nav id="toc" class="fixedsidebar d-none d-lg-block">
    <h5 class="mt-4 mb-4 pt-1"><a class="text-dark" href="/index"><strong>业余无线电做题</strong> 系统</a></h5>
    <a href="/test10b" class="btn btn-primary mb-4 btn-sm btn-round"><i class="fas fa-coffee mr-1"></i>重开一盘</a>
    <ul class="pagination">

        <li class="page-item active"><a class="page-link" href="#startTest">1 </a></li>
        <li class="page-item"><a class="page-link" href="#t2">2  </a></li>
        <li class="page-item"><a class="page-link" href="#t3">3 </a></li>
        <li class="page-item"><a class="page-link" href="#t4">4 </a></li>
        <li class="page-item"><a class="page-link" href="#t5">5 </a></li>
    </ul>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#t6">6  </a></li>
        <li class="page-item "><a class="page-link" href="#t7">7  </a></li>
        <li class="page-item"><a class="page-link" href="#t8">8 </a></li>
        <li class="page-item"><a class="page-link" href="#t9">9  </a></li>
        <li class="page-item"><a class="page-link" href="#t10">10 </a></li>
    </ul>
</nav>

<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------>


<main class="content-withfixedsidebar">


    <!----------------------------------------------------------------------
    NAVBAR (remove topnav if you don't want changed nav background on scroll)
    ------------------------------------------------------------------------>
    <nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container">
            <a class="navbar-brand d-lg-none" href="/index"><i class="fas fa-anchor mr-2"></i><strong>业余无线电</strong> 碎片化练习</a>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarColor02">
                <ul class="navbar-nav mr-auto d-flex align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="./index.html">经验分享</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            业余无线电模拟考试 </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="/study/A30">A类学习</a>
                            <a class="dropdown-item" href="/study/B50">B类学习</a>
                            <a class="dropdown-item" href="/study/C80">C类学习</a>
                            <a class="dropdown-item" href="/test10">A类随机复习</a>
                            <a class="dropdown-item" href="/test10b">B类随机复习</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./test10b">B类随机复习</a>
                    </li>
                    <!--            <li class="d-lg-none nav-item">-->
                    <!--            <a class="nav-link" target="_blank" href="https://www.wowthemes.net/donate/"><i class="fas fa-coffee mr-1"></i> Buy me a coffee</a>-->
                    <!--            </li>-->
                </ul>
                <ul class="navbar-nav ml-auto d-flex align-items-center">
                    <li class="nav-item">
			<span class="nav-link" href="#">
<!--			<a class="btn btn-info btn-round shadow" href="#" data-toggle="modal" data-target="#modal_newsletter">-->
                <!--				<i class="fas fa-cloud-download-alt"></i> 提交批改-->
                <!--				<a  class="downloadzip hidden" ></a>-->
                <!--			</a>-->
				<button type="button" class="btn btn-info btn-round " data-toggle="modal" data-target="#myModal" onclick="correct()">
				  提交批改
				</button>
			</span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->

    <!-------------------------------------
    HEADER
    --------------------------------------->
    <div class="jumbotron jumbotron-lg jumbotron-fluid jumbotron-lg-withnav mb-3 bg-primary position-relative" id="startTest">
        <div class="container text-white h-100 tofront">
            <div class="row align-items-center justify-content-center text-center">
                <div class="col-md-10" >
                    <h1 class="display-3" id="haedTitle" style="cursor:default" >点击开始</h1>
                </div>
            </div>
        </div>
    </div>
    <!--- END HEADER -->

    <!-- DOCS CONTENT -->
    <div class="container pt-5 pb-5 mb-5">
        <div class="row justify-content-center">

            <div class="col-lg-11">
                <div id="docsarea" class="font-weight-normal">
                    <div th:each="title:${titles}" th:id="t+${titleStat.count+1}">
                        <hr/>
                        <p class="lead" >
                            [[${titleStat.count}]].[[${title.context}]]
                            <img class="img-title" th:if="${title.picture}" th:src="${title.picture}">
                            <br/>
                            <label class="SingleSelectUp">
                                <input class="SingleSelect" th:id="A+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}"  th:text="'A.'+${title.Ase}" th:value="${title.Ase}"  disabled>
                                <img th:id="icoTA+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
                                <img th:id="icoFA+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
                            </label>
                            <br/>
                            <label class="SingleSelectUp">
                                <input class="SingleSelect" th:id="B+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}" th:text="'B.'+${title.Bse}" th:value="${title.Bse}"  disabled>
                                <img th:id="icoTB+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
                                <img th:id="icoFB+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
                            </label>
                            <br/>
                            <label class="SingleSelectUp">
                                <input class="SingleSelect" th:id="C+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}" th:text="'C.'+${title.Cse}" th:value="${title.Cse}"  disabled>
                                <img th:id="icoTC+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
                                <img th:id="icoFC+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
                            </label>
                            <br/>
                            <label class="SingleSelectUp">
                                <input class="SingleSelect" th:id="D+${titleStat.count}" type="radio" th:name="optradio+${titleStat.count}"th:text="'D.'+${title.Dse}" th:value="${title.Dse}"  disabled>
                                <img th:id="icoTD+${titleStat.count}" src="/static/Anchor/assets/img/succ.svg" style="height: 2.2em;width: 2.2em;display: none; "/>
                                <img th:id="icoFD+${titleStat.count}" src="/static/Anchor/assets/img/err.svg" style="height: 1.8em;width: 1.8em;display: none; "/>
                            </label>


                            <br  style="display: none;"  />
                        <div class="spaceAnswer"  th:id="trueAnswer+${titleStat.count}" style="font-size: 1.4em;display: none; " >
                            选择正确：[[${title.answer}]]

                        </div>

                        <br style="display: none;" />

                        </p>
                    </div>










                </div><!-- End docs -->
            </div>
        </div>
    </div>
    <!-- End DOCS -->


    <!--	悬浮计时 -->
    <div id="countTime" class="go-top" style="cursor:default">
        计时<br>开始

    </div>


    <!------------------------------------------
    DEMO MODAL
    ------------------------------------------->
    <!-- 模态 -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态标题 -->
                <div class="modal-header">
                    <h4 class="modal-title">本次练习结果</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态主体 -->
                <div class="modal-body">
                    <div id="useTime">用时：</div>
                    <div id="tNum">正确：</div>
                    <div id="fNum">错误：</div>
                    <div id="notNum">未做：</div>
                </div>

                <!-- 模态页脚 -->
                <div class="modal-footer">

                    <button type="button" class="btn btn-info" data-dismiss="modal">再看看题</button>
                </div>

            </div>
        </div>
    </div>
    <!--------------------------------------
    END DEMO MODAL & DONATE BUTTON
    --------------------------------------->


    <!--------------------------------------
    FOOTER
    --------------------------------------->
    <footer class="bg-light pb-5 pt-4">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-12">
                    <span class="d-block mt-3 text-muted">©
                    <script>document.write(new Date().getFullYear())</script>
                        暗夜法师<br>
                    <a target="_blank" href="https://beian.miit.gov.cn">渝ICP备2023013154号</a></span>
                </div>
            </div>
        </div>
    </footer>


</main>
<!--- end main -->


<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="/static/Anchor/assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/functions.js" type="text/javascript"></script>

<!-- Docs -->
<script src="/static/Anchor/assets/js/vendor/prism.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/bootstrap-toc.js" type="text/javascript"></script>
<script>
    $(function() {
        new ClipboardJS('.btn');
        var navSelector = '#toc';
        var $myNav = $(navSelector);
        Toc.init({
            $nav: $('#toc'),
            $scope: $('#docsarea')
        });
        $('body').scrollspy({
            target: navSelector
        });
    });
</script>


<!-- Animation -->
<script src="/static/Anchor/assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<!--禁用小于1200px的动画，如果你喜欢，可以更改值-->
<script>
    AOS.init({
        disable: function () {
            var maxWidth = 1200;
            return window.innerWidth < maxWidth;
        }
    });
</script>

<!-- Tooltips -->
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>

<!-- Popovers -->
<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
    $('.popover-dismiss').popover({
        trigger: 'focus'
    })
</script>

<script>
    var startButton = document.getElementById("startTest");
    var btnFlag=true;
    var haedTitle=document.getElementById("haedTitle");
    let timer;
    var SingleSelects = document.getElementsByClassName("SingleSelect");

    //获取计时
    countTime=document.getElementById("countTime");

    //用于遍历选择题ABCD四个选项
    var selectABCD=['A','B','C','D'];
    //正确数量
    var doTrueCount=0;
    //错误数量
    var doFalseCount=0;

    //做题花的时间秒
    var doTimeS=0;


    // //悬浮框显示的时间
    // var nowTimeS=0;



    //用于判断该选项是否已经做过false表示未做，0表示1题，1表示2题。。。
    var selectFlag=[];
    //初始化数组
    for (let i = 0; i < 10; i++) {
        selectFlag[i]=false;
    }

    //设置可以做题,设置true为不可填写，false为可以填写
    function setCanDo( doAndNot) {
        // console.log(SingleSelects)
        for (let i = 0; i < SingleSelects.length; i++) {
            // console.log(SingleSelects[i].id.substring(1,))

            if (!selectFlag[parseInt(SingleSelects[i].id.substring(1,))-1] ) {

                SingleSelects[i].disabled = doAndNot
            }

        }


    }

    function startAndStopTime(){
        if (btnFlag){
            setCanDo(false)
            // document.getElementById("A1").disabled=false;
            haedTitle.innerHTML="计时中"
            timer = setInterval(function () {
                if (haedTitle.innerHTML =="计时中"){
                    document.getElementById("haedTitle").innerHTML="计时中。"
                }else if (haedTitle.innerHTML =="计时中。"){
                    document.getElementById("haedTitle").innerHTML="计时中。。"
                }else if (haedTitle.innerHTML =="计时中。。"){
                    document.getElementById("haedTitle").innerHTML="计时中。。。"
                }else if (haedTitle.innerHTML =="计时中。。。"){
                    document.getElementById("haedTitle").innerHTML="计时中"
                }
                // console.log("aaa")
                // if (doTimeS>=59){
                // 	doTimeM=doTimeM+1;
                // 	doTimeS=0;
                // }
                doTimeS = doTimeS + 1;

                if (doTimeS<60){
                    countTime.innerHTML = (doTimeS%60)+"秒"+"<div style='display:inline;color: #46e35a;'>• </div>";
                }else {
                    countTime.innerHTML = Math.trunc(doTimeS/60)+"分"+(doTimeS%60)+"秒"+"<div style='display:inline;color: #46e35a;'>• </div>";
                }


            }, 1000);
            btnFlag=false;
        }else {
            setCanDo(true)
            document.getElementById("haedTitle").innerHTML="暂停等待"

            btnFlag=true;
            if (doTimeS<60){
                countTime.innerHTML = (doTimeS%60)+"秒"+"<div style='display:inline;color: red;'>• </div>";
            }else {
                countTime.innerHTML = Math.trunc(doTimeS / 60) + "分" + (doTimeS % 60) + "秒" + "<div style='display:inline;color: red;'>• </div>";
            }
            clearInterval(timer);


        }

    }

    //点击开始触发计时开始和停止
    startButton.addEventListener("click",function() {
        startAndStopTime()

    });

    //悬浮框点击触发计时开始和停止
    countTime.addEventListener("click",function() {

        startAndStopTime()
    });
    // 		function() {
    // 	if (btnFlag){
    // 		setCanDo(false)
    // 		// document.getElementById("A1").disabled=false;
    // 		haedTitle.innerHTML="计时中"
    // 		timer = setInterval(function () {
    // 			if (haedTitle.innerHTML =="计时中"){
    // 				document.getElementById("haedTitle").innerHTML="计时中。"
    // 			}else if (haedTitle.innerHTML =="计时中。"){
    // 				document.getElementById("haedTitle").innerHTML="计时中。。"
    // 			}else if (haedTitle.innerHTML =="计时中。。"){
    // 				document.getElementById("haedTitle").innerHTML="计时中。。。"
    // 			}else if (haedTitle.innerHTML =="计时中。。。"){
    // 				document.getElementById("haedTitle").innerHTML="计时中"
    // 			}
    // 			// console.log("aaa")
    // 			// if (doTimeS>=59){
    // 			// 	doTimeM=doTimeM+1;
    // 			// 	doTimeS=0;
    // 			// }
    // 			doTimeS = doTimeS + 1;
    //
    // 			if (doTimeS<60){
    // 				document.getElementById("countTime").innerHTML = (doTimeS%60)+"秒";
    // 			}else {
    // 				document.getElementById("countTime").innerHTML = Math.trunc(doTimeS/60)+"分"+(doTimeS%60)+"秒";
    // 			}
    //
    //
    // 		}, 1000);
    // 		btnFlag=false;
    // 	}else {
    // 		setCanDo(true)
    // 		document.getElementById("haedTitle").innerHTML="暂停等待"
    //
    // 		btnFlag=true;
    // 		clearInterval(timer);
    // 	}
    //
    // }


    // 到题目位置的导航栏
    let goPoint = document.getElementsByClassName("page-item");

    for (let i = 0; i < goPoint.length; i++) {
        //监听按钮点击
        goPoint[i].addEventListener("click", function() {
            console.log(i)

            for (let j = 0; j < goPoint.length; j++) {
                goPoint[j].className="page-item";
            }
            goPoint[i].className="page-item active";
        });
    }

    // var spaceAnswerAll = document.getElementsByClassName("spaceAnswer");
    for (let num = 0; num < SingleSelects.length; num++) {
        //监听按钮点击
        SingleSelects[num].addEventListener("click", function() {

            //显示选择的题号
            let titleNum=SingleSelects[num].id.substring(1,);

            //true表示该题已做不可再选
            selectFlag[parseInt(titleNum)-1]=true

            //将该题设置为不可选
            for (let i = 0; i < selectABCD.length; i++) {
                document.getElementById(selectABCD[i]+titleNum).disabled=true

            }


            // console.log(titleNum)
            //显示答案
            let answerEl=document.getElementById("trueAnswer"+titleNum)
            //显示答案
            answerEl.style.display="block"
            //获取答案文本
            // console.log(answerEl.innerText.substring(4,))
            //
            //
            // console.log(SingleSelects[num].value)

            //正确答案与选项内容比对
            if (answerEl.innerText.substring(5,)===SingleSelects[num].value){
                //选择正确答案图标展示
                document.getElementById("icoT"+SingleSelects[num].id).style.display="inline"
                //正确计数加1
                doTrueCount=doTrueCount+1;


            }else {
                //选择错误答案图标展示
                document.getElementById("icoF"+SingleSelects[num].id).style.display="inline"

                doFalseCount=doFalseCount+1;

                //遍历选项寻找正确答案进行展示
                for (let i = 0; i <selectABCD.length ; i++) {

                    //ABCD获取选择内容
                    let selectText=document.getElementById(selectABCD[i]+titleNum).value
                    //对比ABCD选项找到正确答案
                    if (answerEl.innerText.substring(5,)===selectText){
                        //对正确选项予以展示
                        document.getElementById("icoT"+selectABCD[i]+titleNum).style.display="inline"
                        // 答案展示
                        answerEl.innerText="应该选："+selectABCD[i]+"{ "+selectText+" }"
                    }
                }

            }

            // document.getElementsByClassName("spaceDown"+titleNum).style.display="block"
            // document.getElementsByClassName("spaceUp"+titleNum).style.display="block"
            // SingleSelects[num].style.display="block"

            // for (let j = 0; j < goPoint.length; j++) {
            // 	goPoint[j].className="page-item";
            // }
            // goPoint[i].className="page-item active";
        });
    }


    function correct() {

        if (doTimeS<60){
            document.getElementById("useTime").innerHTML="用时："+(doTimeS%60)+"秒";
        }else {
            document.getElementById("useTime").innerHTML="用时："+Math.trunc(doTimeS/60)+"分"+(doTimeS%60)+"秒";
        }

        document.getElementById("tNum").innerHTML="正确："+doTrueCount;
        document.getElementById("fNum").innerHTML="错误："+doFalseCount;
        document.getElementById("notNum").innerHTML="未做："+(10-doTrueCount-doFalseCount);
    }
</script>

</body>
</html>